---
title: 通过 CDN 使用 Univer
---

如果你不使用包管理工具，也可以通过 `<script>` 标签引入 Univer。

## 命名空间规范

Univer 的全局构建（UMD）会在全局对象上暴露一个命名空间，它们的命名规范如下：

```plain
# 预设
@univerjs/presets -> UniverPresets
@univerjs/preset-docs-core -> UniverPresetDocsCore
@univerjs/preset-docs-core/locales/zh-CN -> UniverPresetDocsCoreZhCN

# 插件
@univerjs/core -> UniverCore
@univerjs/docs-ui -> UniverDocsUi
@univerjs-pro/docs-print -> UniverProDocsPrint
@univerjs/docs-ui/locale/zh-CN -> UniverDocsUiZhCN
@univerjs/core/facade -> UniverCoreFacade
```

## 预设模式 [#preset-mode]

### 使用全局构建版本

我们在当前主流的 CDN 服务商（例如 [jsDelivr](https://www.jsdelivr.com)、[unpkg](https://unpkg.com)）都提供了 Univer 的 UMD 构建，你可以在 HTML 文件中引入这些资源（当然你也可以下载这些文件然后通过自己的服务器或者 CDN 网络分发）：

<Callout type="warning" title="注意事项">
  通过 `<script>` 标签引入 Univer 的 UMD 构建包在使用方式上和使用包管理工具以及构建工具并无太大差异，但需要注意：虽然预设包本质上是插件的集合，但当你想引入某个特定插件的对象或方法时，你必须从插件的命名空间中获取，而不是从它们所被包含的预设包的命名空间中获取。

  例如，虽然 `@univerjs/core` 被包含在 `@univerjs/presets` 中，但你仍然需要从 `@univerjs/core` 的命名空间 `UniverCore` 中获取它们：
</Callout>

#### 示例

```html
<head>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>

  <script src="https://unpkg.com/@univerjs/presets/lib/umd/index.js"></script>

  <script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/locales/zh-CN.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/preset-sheets-core/lib/index.css" />
  <style>
    html,
    body,
    #root,
    #app {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { createUniver } = UniverPresets
    const { LocaleType, mergeLocales } = UniverCore
    const { UniverSheetsCorePreset } = UniverPresetSheetsCore

    const { univerAPI } = createUniver({
      locale: LocaleType.ZH_CN,
      locales: {
        [LocaleType.ZH_CN]: mergeLocales(UniverPresetSheetsCoreZhCN),
      },
      presets: [UniverSheetsCorePreset()],
    })

    univerAPI.createWorkbook({ name: 'Test Sheet' })
  </script>
</body>
```

## 插件模式 [#plugin-mode]

### 使用全局构建版本

和预设模式一样 Univer 也为每个插件都提供了 UMD 包，但与之不同的是，你需要手动引入每个插件的 UMD 包以及它们的前置依赖包。这个过程非常繁琐，我们并**不推荐**这种方式。请在完全理解插件机制（如插件之间的依赖关系，以及插件样式文件的引入顺序）之后再考虑使用。

#### 示例

```html
<head>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi/dist/umd/index.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi/dist/umd/react-bindings/index.js"></script>

  <script src="https://unpkg.com/@univerjs/core/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/docs/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/index.js"></script>

  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/facade.js"></script>

  <script src="https://unpkg.com/@univerjs/design/lib/umd/locale/zh-CN.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/zh-CN.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/locale/zh-CN.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/locale/zh-CN.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/zh-CN.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/locale/zh-CN.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/locale/zh-CN.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/@univerjs/design/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/docs-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-formula-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/index.css" />

  <style>
    html,
    body,
    #root,
    #app {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { Univer, LocaleType, mergeLocales, UniverInstanceType } = UniverCore
    const { FUniver } = UniverCoreFacade
    const { defaultTheme } = UniverDesign
    const { UniverRenderEnginePlugin } = UniverEngineRender
    const { UniverFormulaEnginePlugin } = UniverEngineFormula
    const { UniverUIPlugin } = UniverUi
    const { UniverSheetsPlugin } = UniverSheets
    const { UniverSheetsUIPlugin } = UniverSheetsUi
    const { UniverDocsPlugin } = UniverDocs
    const { UniverDocsUIPlugin } = UniverDocsUi
    const { UniverSheetsFormulaPlugin } = UniverSheetsFormula
    const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi
    const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt
    const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi

    const univer = new Univer({
      locale: LocaleType.ZH_CN,
      locales: {
        [LocaleType.ZH_CN]: mergeLocales(
          UniverDesignZhCN,
          UniverUiZhCN,
          UniverSheetsZhCN,
          UniverSheetsUiZhCN,
          UniverDocsUiZhCN,
          UniverSheetsFormulaUiZhCN,
          UniverSheetsNumfmtUiZhCN,
        ),
      },
    })

    univer.registerPlugin(UniverRenderEnginePlugin)
    univer.registerPlugin(UniverFormulaEnginePlugin)

    univer.registerPlugin(UniverUIPlugin, {
      container: 'app',
    })

    univer.registerPlugin(UniverDocsPlugin)
    univer.registerPlugin(UniverDocsUIPlugin)

    univer.registerPlugin(UniverSheetsFormulaPlugin)
    univer.registerPlugin(UniverSheetsFormulaUIPlugin)
    univer.registerPlugin(UniverSheetsNumfmtPlugin)
    univer.registerPlugin(UniverSheetsNumfmtUIPlugin)

    univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})

    const univerAPI = FUniver.newAPI(univer)
  </script>
</body>
```

## 指定版本

unpkg 和 jsDeliver 都支持指定特定版本的资源。以 unpkg 为例，如果你想使用 `x.y.z` 版本的 Univer，仅需在 URL 中加上 `@<version>` 来指定版本即可：

```diff
- https://unpkg.com/@univerjs/presets/lib/umd/index.js
+ https://unpkg.com/@univerjs/presets@x.y.z/lib/umd/index.js
```
